<template>
	<!-- main S -->
	<view class="main">
		<!-- tabBox S -->
		<view class="tabBox">
			<view class="tab" id="0" @tap="changeIndex" :class="(activeIndex==0?'active':'')">
				全部
			</view>
			<view class="tab" id="1" @tap="changeIndex" :class="(activeIndex==1?'active':'')">
				待结算
			</view>
			<view class="tab" id="2" @tap="changeIndex" :class="(activeIndex==2?'active':'')">
				已结算
			</view>
		</view>
		<!-- tabBox E -->
        <!-- orderListBox S -->
        <view class="orderListBox"
        v-for="(item,index) in orderList_0"
        :class="(activeIndex==0?'show':'hide')"
        :key="item.id"
        @tap="goOrderDetail(item.id)">
            <!-- order S -->
            <view class="order">
                <!-- top S -->
                <view class="top">
                    <!-- topL S -->
                    <view class="topL">
                        <text>{{item.orderType}}</text>
                        <text>{{item.addTime}}</text>
                    </view>
                    <!-- topL E -->
                    <!-- topR S -->
                    <view class="topR">
                        充值成功已结算
                    </view>
                    <!-- topR E -->
                </view>
                <!-- top E -->
                <!-- center S -->
                <view class="center">
                    <view class="logo">
                        <image src="../../static/logo.png" mode=""></image>
                    </view>
                    <view class="fonts">
                        <view class="fontOne">
                            <text>优酷</text>
                            <text>{{item.title}}</text>
                        </view>
                        <view class="fontTwo">
                            <text>充值账户:</text>
                            <text>17600782315</text>
                        </view>
                        <view class="fontThree">
                            <text>付款</text>
                            <text>￥6.3</text>
                        </view>
                    </view>
                </view>
                <!-- center E -->
                <!-- bottom S -->
                <view class="bottom">
                    <view class="rowOne">
                        <text class="rowOneL">获得红包</text>
                        <view class="rowOneR">
                            <text>6.3</text>
                            <text>去兑换</text>
                        </view>
                    </view>
                    <view class="rowTwo">
                        <text>订单号 123456789</text>
                        <text>复制</text>
                    </view>
                </view>
                <!-- bottom E -->
            </view>
            <!-- order E -->
        </view>
        <!-- orderListBox E -->
        <!-- orderListBox S -->
        <view class="orderListBox"
        v-for="(item,index) in orderList_1"
        :class="(activeIndex==1?'show':'hide')"
        :key="item.id"
        @tap="goOrderDetail(item.id)">
            <!-- order S -->
            <view class="order">
                <!-- top S -->
                <view class="top">
                    <!-- topL S -->
                    <view class="topL">
                        <text>自购订单</text>
                        <text>11-01 22:52</text>
                    </view>
                    <!-- topL E -->
                    <!-- topR S -->
                    <view class="topR">
                        充值成功已结算
                    </view>
                    <!-- topR E -->
                </view>
                <!-- top E -->
                <!-- center S -->
                <view class="center">
                    <view class="logo">
                        <image src="../../static/logo.png" mode=""></image>
                    </view>
                    <view class="fonts">
                        <view class="fontOne">
                            <text>优酷</text>
                            <text>{{item.title}}</text>
                        </view>
                        <view class="fontTwo">
                            <text>充值账户:</text>
                            <text>17600782315</text>
                        </view>
                        <view class="fontThree">
                            <text>付款</text>
                            <text>￥6.3</text>
                        </view>
                    </view>
                </view>
                <!-- center E -->
                <!-- bottom S -->
                <view class="bottom">
                    <view class="rowOne">
                        <text class="rowOneL">获得红包</text>
                        <view class="rowOneR">
                            <text>6.3</text>
                            <text>去兑换</text>
                        </view>
                    </view>
                    <view class="rowTwo">
                        <text>订单号 123456789</text>
                        <text>复制</text>
                    </view>
                </view>
                <!-- bottom E -->
            </view>
            <!-- order E -->
        </view>
        <!-- orderListBox E -->
        <!-- orderListBox S -->
        <view class="orderListBox"
        v-for="(item,index) in orderList_2"
        :class="(activeIndex==2?'show':'hide')"
        :key="item.id"
        @tap="goOrderDetail(item.id)">
            <!-- order S -->
            <view class="order">
                <!-- top S -->
                <view class="top">
                    <!-- topL S -->
                    <view class="topL">
                        <text>自购订单</text>
                        <text>11-01 22:52</text>
                    </view>
                    <!-- topL E -->
                    <!-- topR S -->
                    <view class="topR">
                        充值成功已结算
                    </view>
                    <!-- topR E -->
                </view>
                <!-- top E -->
                <!-- center S -->
                <view class="center">
                    <view class="logo">
                        <image src="../../static/logo.png" mode=""></image>
                    </view>
                    <view class="fonts">
                        <view class="fontOne">
                            <text>优酷</text>
                            <text>{{item.title}}</text>
                        </view>
                        <view class="fontTwo">
                            <text>充值账户:</text>
                            <text>17600782315</text>
                        </view>
                        <view class="fontThree">
                            <text>付款</text>
                            <text>￥6.3</text>
                        </view>
                    </view>
                </view>
                <!-- center E -->
                <!-- bottom S -->
                <view class="bottom">
                    <view class="rowOne">
                        <text class="rowOneL">获得红包</text>
                        <view class="rowOneR">
                            <text>6.3</text>
                            <text>去兑换</text>
                        </view>
                    </view>
                    <view class="rowTwo">
                        <text>订单号 123456789</text>
                        <text>复制</text>
                    </view>
                </view>
                <!-- bottom E -->
            </view>
            <!-- order E -->
        </view>
        <!-- orderListBox E -->
	</view>
	<!-- main E -->
</template>

<script>
	export default {
		data() {
			return {
				title: 'OrderList',
				activeIndex : 0,
				orderList_0 : [
					{
						id : 1,
						title : '商品0-1',
						icon : '../../static/logo.png',
						rechargeNumber : '17600782315',
						addTime : '10-01 22:52',
						orderStatus : '充值成功已结算',
						orderType : '自购订单',
						channel : '优酷',
						redPack : '6.3',
						orderSn : '123456789',
					},
					{
						id : 2,
						title : '商品0-2',
						icon : '../../static/logo.png',
						rechargeNumber : '17600782315',
						addTime : '10-01 22:52',
						orderStatus : '充值成功已结算',
						orderType : '自购订单',
						channel : '优酷',
						redPack : '6.3',
						orderSn : '123456789',
					},
				],
                orderList_1 : [
                	{
                		id : 3,
                		title : '商品1-1',
                		icon : '../../static/logo.png',
                		rechargeNumber : '17600782315',
                		addTime : '10-01 22:52',
                		orderStatus : '充值成功已结算',
                		orderType : '自购订单',
                		channel : '优酷',
                		redPack : '6.3',
                		orderSn : '123456789',
                	},
                	{
                		id : 4,
                		title : '商品1-2',
                		icon : '../../static/logo.png',
                		rechargeNumber : '17600782315',
                		addTime : '10-01 22:52',
                		orderStatus : '充值成功已结算',
                		orderType : '自购订单',
                		channel : '优酷',
                		redPack : '6.3',
                		orderSn : '123456789',
                	},
                    {
                    	id : 5,
                    	title : '商品1-3',
                    	icon : '../../static/logo.png',
                    	rechargeNumber : '17600782315',
                    	addTime : '10-01 22:52',
                    	orderStatus : '充值成功已结算',
                    	orderType : '自购订单',
                    	channel : '优酷',
                    	redPack : '6.3',
                    	orderSn : '123456789',
                    }
                ],
                orderList_2 : [
                	{
                		id : 6,
                		title : '商品2-1',
                		icon : '../../static/logo.png',
                		rechargeNumber : '17600782315',
                		addTime : '10-01 22:52',
                		orderStatus : '充值成功已结算',
                		orderType : '自购订单',
                		channel : '优酷',
                		redPack : '6.3',
                		orderSn : '123456789',
                	},
                	{
                		id : 7,
                		title : '商品2-2',
                		icon : '../../static/logo.png',
                		rechargeNumber : '17600782315',
                		addTime : '10-01 22:52',
                		orderStatus : '充值成功已结算',
                		orderType : '自购订单',
                		channel : '优酷',
                		redPack : '6.3',
                		orderSn : '123456789',
                	},
                ]
			}
		},
		onLoad(param) {
			console.log(param);
		},
		methods: {
            // 切换顶部选项卡
			changeIndex(e){
				this.$data.activeIndex = e.currentTarget.id
			},
            
            // 跳转到订单详情页
            goOrderDetail(orderId){
                uni.navigateTo({
                	url: `./order_video_detail?orderId=${orderId}`
                })
            }
		}
	}
</script>

<style>
	/* .main{
		padding-top: 0 !important;
	} */
	.tabBox{
		width: 100%;
		border: 0rpx solid red;
		margin: 0 auto;
		display: flex;
		flex-direction:row;
		background: #FFFFFF;
	}
	.tabBox>.tab{
		display: flex;
		justify-content: center;
		border: 0rpx solid red;
		height: 80rpx;
		width: 100rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 24rpx;
	}
	.tabBox>.tab:nth-child(1){
		margin-left: 60rpx;
	}
	.tabBox>.tab:nth-child(2){
		margin: 0 140rpx 0 140rpx;
	}
	
	.orderListBox{
		width: 100%;
		border: 0rpx solid red;
		margin: 0 auto;
	}
	.orderListBox>.order{
		/* height: 300rpx; */
		width: 95%;
		border: 0rpx solid red;
		margin: 0 auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		background: #ffffff;
	}
	.order>.top{
		height: 80rpx;
		border-bottom: 1rpx solid #F1F1F1;
		width: 100%;
	}
	.order>.top>.topL{
		float: left;
	}
	.order>.top>.topL>text:first-child{
		display: inline-block;
		border: 0rpx solid red;
		height: 40rpx;
		width: 150rpx;
		margin-top: 20rpx;
		text-align: center;
		background-color: pink;
		color: #FFFFFF;
		margin-right: 10rpx;
		margin-left: 20rpx;
	}
	.order>.top>.topL>text:last-child{
		color: gray;
		font-size: 28rpx;
	}
	.order>.top>.topR{
		float: right;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #F0AD4E;
		margin-right: 20rpx;
	}
	
	.order>.center{
		height: 180rpx;
		width: 95%;
		border-bottom: 1rpx solid #F1F1F1;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.order>.center>.logo{
		height: 130rpx;
		width: 130rpx;
		float: left;
		margin-right: 20rpx;
	}
	.order>.center>.logo>image{
		height: 100%;
		width: 100%;
	}
	.order>.center>.fonts>text{
		display: block;
	}
	.order>.center>.fonts>.fontOne{
		margin-bottom: 5rpx;
	}
	.order>.center>.fonts>.fontOne>text:first-child{
		display: inline-block;
		border: 1rpx solid red;
		height: 40rpx;
		width: 80rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		border-radius: 20rpx;
		color: #007AFF;
		margin-right: 10rpx;
	}
	.order>.center>.fonts>.fontOne>text:last-child{
		font-size: 28rpx;
	}
	.order>.center>.fonts>.fontTwo{
		margin-bottom: 10rpx;
	}
	.order>.center>.fonts>.fontTwo>text:first-child{
		font-size: 26rpx;
		margin-right: 20rpx;
	}
	.order>.center>.fonts>.fontThree>text:first-child{
		font-size: 26rpx;
		color: gray;
	}
	.order>.center>.fonts>.fontThree>text:last-child{
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}
	
	.bottom{
		height: 160rpx;
		width: 95%;
		border: 0rpx solid red;
		margin: 0 auto;
	}
	.bottom>.rowOne{
		height: 80rpx;
		width: 100%;
		border: 0rpx solid blue;
		/* line-height: 80rpx; */
	}
	.bottom>.rowOne>.rowOneL{
		float: left;
		margin-left: 20rpx;
		color: gray;
		line-height: 80rpx;
	}
	.bottom>.rowOne>.rowOneR{
		display: block;
		float: right;
		margin-right: 20rpx;
		border: 0rpx solid red;
		width: 180rpx;
		padding-left: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: rgba(246,203,144,0.3);
	}
	.bottom>.rowOne>.rowOneR>text:first-child{
		margin-right: 20rpx;
		font-size: 24rpx;
		color: red;
		font-weight: bold;
		line-height: 40rpx;
        height: 40rpx;
	}
	.bottom>.rowOne>.rowOneR>text:last-child{
		display: inline-block;
		border: 0rpx solid red;
		width: 122rpx;
		border-radius: 20rpx;
		text-align: center;
        height: 48rpx;
		line-height: 48rpx;
		color: #FFFFFF;
		background-color: rgba(238,153,34,1);
		font-size: 24rpx;
		font-weight: bold;
	}
	.bottom>.rowTwo{
		border-top: 1rpx solid #F1F1F1;
		width: 95%;
		margin: 0 auto;
		height: 50rpx;
		margin-top: 10rpx;
		padding-top: 10rpx;
	}
	.bottom>.rowTwo>text:first-child{
		font-size: 26rpx;
		color: gray;
		float: left;
		line-height: 50rpx;
	}
	.bottom>.rowTwo>text:last-child{
		font-size: 20rpx;
		color: #000000;
		float: right;
		border: 0rpx solid blue;
		width: 80rpx;
		text-align: center;
		height: 30rpx;
		margin-top: 10rpx;
		margin-right: 20rpx;
		line-height: 30rpx;
		border-radius: 20rpx;
		background-color: #F1F1F1;
	}
	
	
	.active{
		color: red;
		font-size: 30rpx;
		border-bottom: 1rpx solid #F0AD4E !important;
	}
	.hide{
		display: none;
	}
	.show{
		display: block;
	}
</style>
